<template>
<div class="pad10">
  <div >
      
      <el-form :inline="true"  class="demo-form-inline">

        <el-form-item label="订单ID">
          <el-input v-model="id" placeholder="输入订单id"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="mobile" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="shenfenzheng" placeholder="身份证"></el-input>
        </el-form-item>

        <el-form-item label="所属银行">
          <el-select v-model="yinhang_id" placeholder="选择所属银行">
            <el-option v-for="v in yinhang" :label="v.title" :value="v.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="订单生成时间">
        <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="To"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      >
      </el-date-picker>
        </el-form-item>
        
        <el-form-item>
        <el-button type="primary" @click="sousuo()">搜索</el-button>
        <el-button type="danger" @click="exportExcel()">导出当前订单</el-button>
        </el-form-item>
    </el-form>

  </div>
<div class="k">
    <el-table :data="tableData" border  style="width: 100%;" height="600">
        <el-table-column prop="id" label="订单ID" width="80" />
        <el-table-column prop="ing_str" label="状态" width="80" />
        <el-table-column prop="ing_str2" label="奖励类型" width="80" />
        <el-table-column prop="yinhang_name" label="产品" width="100" />
        <el-table-column prop="name" label="姓名" width="100" />
        <el-table-column prop="mobile" label="手机" width="110" />
        <el-table-column prop="shenfenzheng" label="身份证号" width="180" />
        <el-table-column prop="shijian" label="下单时间"  width="180" />
        <el-table-column prop="shijian_wancheng" label="完成时间"   width="180" />
        <el-table-column fixed="right" label="Operations" >
        <template #default="v">
            <el-button type="info" size="mini" @click="handleClick(v.$index, v.row)"
            >查看详情</el-button>
            
            
        </template>
        </el-table-column>
    </el-table>

</div>
</div>
<div class="pad10">
    <el-pagination
      v-model:currentPage="page"
      :page-sizes="[10, 50, 100, 500]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
</div>

<el-drawer
    v-model="drawer"
    title="订单详情"
    direction="rtl"
    :before-close="handleClose"
  >

  <table class="table table-bordered" style="table-layout: fixed;">
      <tr>
          <th width="20%">ID</th>
          <td class="juzuo">{{shuju.id}}</td>
      </tr>
      <tr>
          <th>单号</th>
          <td class="juzuo">{{shuju.danhao}}</td>
      </tr>
      <tr>
          <th>订单状态</th>
          <td class="juzuo">{{shuju.ing_str}}</td>
      </tr>
      <tr>
          <th>奖励类型</th>
          <td class="juzuo">{{shuju.ing_str2}}</td>
      </tr>
      <tr>
          <th>产品</th>
          <td class="juzuo">{{shuju.yinhang_name}}</td>
      </tr>
      <tr>
          <th>姓名</th>
          <td class="juzuo">{{shuju.name}}</td>
      </tr>
      <tr>
          <th>手机号</th>
          <td class="juzuo">{{shuju.mobile}}</td>
      </tr>
      <tr>
          <th>身份证</th>
          <td class="juzuo">{{shuju.shenfenzheng}}</td>
      </tr>
      <tr>
          <th>生成时间</th>
          <td class="juzuo">{{shuju.shijian}}</td>
      </tr>
      <tr>
          <th>完成时间</th>
          <td class="juzuo">{{shuju.shijian_wancheng}}</td>
      </tr>
      <tr>
          <th>最后更新时间</th>
          <td class="juzuo">{{shuju.last_caozuo_shijian}}</td>
      </tr>
      <tr>
          <th>办卡链接</th>
          <td class="juzuo" style="word-wrap:break-word">{{shuju.url}}</td>
      </tr>
      <tr v-if="shuju && shuju.jiangli" v-for="v in shuju.jiangli">
          <th>预计奖励</th>
          <td class="juzuo" style="word-wrap:break-word">{{v.money}}元</td>
      </tr>
  </table>
    
  </el-drawer>
</template>

<script scoped>
import { defineComponent, ref,reactive,toRefs } from 'vue'
import { ElMessage } from 'element-plus'
import {request} from '../api/request.js'
import { export_json_to_excel } from '../api/Export2Excel'

export default defineComponent({
    data(){
      return {
        yinhang:[],
        shuju:null
      }
    },
  methods: {
     exportExcel() {
      var tHeader = ['订单ID', '单号', '状态','奖励类型','产品','姓名','手机','身份证','下单时间','完成时间','申请链接','最后更新时间']
      var filterVal = ['id', 'danhao','ing_str','ing_str2','yinhang_name','name','mobile','shenfenzheng','shijian','shijian_wancheng','url','last_caozuo_shijian']
      var filename = 'orderExcel'
      var data = this.formatJson(filterVal, this.tableData)
      export_json_to_excel({
        header: tHeader,
        data,
        filename
      })
    },
    formatJson(filterVal, tableData) {
      return tableData.map(v => {
          return filterVal.map(j => {
                  return v[j]
              })
          }
      )
    },
    get_yinhang(){
      request('/api/index/yinhang_list2',{},res=>{
          console.log(res)
          if(res.ing==1){
              this.yinhang=res.data;
          }else{
              ElMessage.error(res.msg)
          }
      },err=>{
          ElMessage.error( err.msg )
      })
    },
    handleClick(a,b) {
      console.log(a)
      console.log(b.id)
      this.shuju=b
      this.drawer=true
    },
  },
  mounted(){
    console.log('挂载')
    this.get_yinhang();
    this.jiazai();
  },
  setup() {
    var id=ref('');
    var name=ref('');
    var mobile=ref('');
    var shenfenzheng=ref('');
    var yinhang_id=ref('');
    var page=ref(1);
    var tableData=ref([]);
    var total=ref(0);
    var limit=ref(10);
    var token=window.sessionStorage.getItem('token');
    const handleSizeChange = (val) => {
      console.log(`${val} items per page`)
      limit.value=val
      jiazai()
    }
    const handleCurrentChange = (val) => {
    //   console.log(`current page: ${val}`)
      page.value = val
      jiazai()
    }

    const jiazai=()=>{
      console.log('jiazai')
      console.log(state.value1);
      request('/api/index/get_order_list',{token:token,page: page.value ,limit:limit.value , shijian:state.value1 , id:id.value, yinhang_id:yinhang_id.value, name:name.value,mobile:mobile.value,shenfenzheng:shenfenzheng.value },res=>{
          console.log(res)
          if(res.ing==1){
              tableData.value=res.data.list;
              total.value=res.data.total;
          }else{
              ElMessage.error(res.msg)
          }
      },err=>{
          ElMessage.error( err.msg )
      })
    }

    const sousuo=()=>{
        page.value=1
        jiazai()
    }

    const drawer = ref(false);

    const state = reactive({
      shortcuts: [
        {
          text: '上周',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
          },
        },
        {
          text: '上个月',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
          },
        },
        {
          text: '近三个月',
          value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
          },
        },
      ],
      value1: '',
      value2: '',
    })

    return {
      page,id,name,mobile,yinhang_id,shenfenzheng,
      tableData,
      total,
      token,
      limit,
      drawer,
      ...toRefs(state),
      jiazai,
      sousuo,
      handleSizeChange,
      handleCurrentChange,
    }
  },



})
</script>

<style scoped>
.k{border: 1px solid var(--el-border-color-base);}
.headClass{background-color: #666666 !important;}

table {
  border-spacing: 0;
  border-collapse: collapse;
}
td,
th {
  padding: 0;
}
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}
.table-bordered th,  .table-bordered td {
    border: 1px solid #ddd !important;
  }
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
.table > tbody + tbody {
  border-top: 2px solid #ddd;
}
.table .table {
  background-color: #fff;
}
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
  padding: 5px;
}
.table-bordered {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}
.table-hover > tbody > tr:hover {
  background-color: #f5f5f5;
}
table col[class*="col-"] {
  position: static;
  display: table-column;
  float: none;
}
table td[class*="col-"],
table th[class*="col-"] {
  position: static;
  display: table-cell;
  float: none;
}
.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
  background-color: #f5f5f5;
}
.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
  background-color: #e8e8e8;
}
.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tfoot > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th {
  background-color: #dff0d8;
}
.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover,
.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr:hover > .success,
.table-hover > tbody > tr.success:hover > th {
  background-color: #d0e9c6;
}
.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
  background-color: #d9edf7;
}
.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr.info:hover > th {
  background-color: #c4e3f3;
}
.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th {
  background-color: #fcf8e3;
}
.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr.warning:hover > th {
  background-color: #faf2cc;
}
.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
  background-color: #f2dede;
}
.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr.danger:hover > th {
  background-color: #ebcccc;
}
.table-responsive {
  min-height: .01%;
  overflow-x: auto;
}

.table > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
</style>